<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
		<title>index</title>
		<link rel="stylesheet" href="source/plugins/layui/css/layui.css" />
		<link rel="stylesheet" href="source/plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="source/plugins/datatables/jquery.dataTables.min.css" />
		<link rel="stylesheet" href="source/plugins/ztree/css/metroStyle/metroStyle.css" />
		<link rel="stylesheet" href="source/css/system.css" />
	</head>

	<body>
		<div class="admin-submain">
			<div class="layui-tab layui-tab-brief admin-subtab">

				<ul class="layui-tab-title">
					<li class="layui-this">内容1</li>
					<li data-table="true">内容2</li>
					<li>内容3</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<div class="search-barbox">
							<div class="search-bar">
								<div class="selectbar">
									<li class="layui-nav-item listbox select-show">
										<a href="javascript:;" class="text-table-turn"><span>选择更改事件</span><i class="layui-icon">&#xe61a;</i></a>
										<dl class="layui-nav-child layui-anim layui-anim-upbit select-table-turn">
											<dd class="layui-this">
												<a href="JavaScript:void(0);">选择更改事件</a>
											</dd>
											<dd>
												<a href="JavaScript:void(0);">全部列表</a>
											</dd>
											<dd>
												<a href="JavaScript:void(0);">待审核</a>
											</dd>
											<dd>
												<a href="JavaScript:void(0);">审核未通过</a>
											</dd>
										</dl>
									</li>
								</div>
								<div class="input-search" id="example_filter" style="display: inline;">
									<label class="input-search-inner">
										<span class="ant-input-wrapper">
											<input aria-controls="example" type="search" placeholder="请输入清单编号/项目编号/子项目编号"  data-column="" id="mul_col_filter" name="keyword" class="ant-input">
										</span>
										<i class="search-btn"><img src="source/images/icon-search.png" alt="" /></i>
									</label>
									<button type="button" class="btn-search-advance" id="btn-search-advance">高级搜索</button>
								</div>
							</div>
							<div class="btn-drop-box" id="pLsitHeader">
								<button type="button" class="ant-btn" id="role-newadd"><span>新 增</span></button>
							</div>
						</div>
						<div class="operation-bar operation-checkbox">
							<div class="leftpart">
								<button class="btn-icon operation-close"><i class="layui-icon">&#x1006;</i></button>
								<span class="checked-tips">已选择<em>0</em>项</span>
								<span>
									<button class="btn-icon"><i class="layui-icon">&#xe62f;</i>操作1</button>
									<button class="btn-icon" id="role-deletes"><i class="layui-icon">&#xe640;</i>删除</button>
								</span>
							</div>
						</div>
						<div class="operation-bar keepon-search">
							<div class="leftpart">
								<span class="checked-tips">搜索结果</span>
								<span>
									<button class="btn-icon" id="clear-search-btn"><i class="fa fa-eraser" aria-hidden="true"></i>清除搜索</button>
									<button class="btn-icon" id="keep-search-btn"><i class="fa fa-search" aria-hidden="true"></i>继续搜索</button>
								</span>
							</div>
						</div>
						<div class="submain-table submain-complextable">
							<table id="role-list" class="table" cellspacing="0" lay-skin="nob" cellspacing="0">
								<thead>
									<tr>
										<th></th>
										<th class="text-center">
											<label for="" class="checkbox">
												<input type="checkbox" id="checkall" />
												<i class="checkbox-inner"></i>
											</label>
										</th>
										<th>角色名称</th>
										<th>角色编号</th>
										<th>角色类型</th>
										<th>角色描述</th>
										<th>创建时间</th>
										<th>修改时间</th>
										<th class="caozuo" width="50">
											<i class="fa fa-sliders fa-rotate-90 toggle-vis" aria-hidden="true"></i>
										</th>
									</tr>
								</thead>
							</table>
							<div class="caozuo-box" id="caozuo-box">
								<div class="caozuo-mask" onclick="isshow_caozuo('hide')"></div>
								<div class="caozuo-vis" id="caozuo-vis">
									<h3 class="title">选择显示字段</h3>
									<div class="content">
										<ul>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="2"/>
														<i class="checkbox-inner"></i>
													</div>
													角色名称
												</label>
											</li>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="3"/>
														<i class="checkbox-inner"></i>
													</div>
													角色编号
												</label>
											</li>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="4"/>
														<i class="checkbox-inner"></i>
													</div>
													角色类型
												</label>
											</li>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="5"/>
														<i class="checkbox-inner"></i>
													</div>
													角色描述
												</label>
											</li>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="6"/>
														<i class="checkbox-inner"></i>
													</div>
													创建时间
												</label>
											</li>
											<li>
												<label>
								                	<div class="checkbox">
														<input type="checkbox" data-column="7"/>
														<i class="checkbox-inner"></i>
													</div>
													修改时间
												</label>
											</li>
										</ul>
									</div>
									<div class="footer">
										<button type="button" class="ant-btn ant-btn-ghost" id="caozuo-visbtn"><span>确 定</span></button>
										<button type="button" class="ant-btn" onclick="isshow_caozuo('hide')"><span>取 消</span></button>
									</div>
								</div>
							</div>
							<div>
								<div class="advanced-search-mask" id="advanced-search-mask" onclick="advanced_cancel()"></div>
								<div class="layui-layer layui-layer-dialog advanced-skin layer-anim" id="advanced-box">
									<div class="layui-layer-title">高级查询</div>
									<div class="layui-layer-content">
										<div class="advanced-search">
											<div class="advanced-box">
												<form class="layui-form">
													<div class="layui-form-item"><label class="layui-form-label">清单编号</label>
														<div class="layui-input-block"><input type="text" name="list_number" autocomplete="off" placeholder="请清单编号" class="layui-input"></div>
													</div>
													<div class="layui-form-item"><label class="layui-form-label">项目编号</label>
														<div class="layui-input-block"><input type="text" name="item_number" autocomplete="off" placeholder="请项目编号" class="layui-input"></div>
													</div>
													<div class="layui-form-item"><label class="layui-form-label">子项目编号</label>
														<div class="layui-input-block"><input type="text" name="subitem_number" autocomplete="off" placeholder="请输入子项目编号" class="layui-input"></div>
													</div>
												</form>
											</div>
										</div>
									</div>
									<div class="layui-layer-btn">
										<a class="layui-layer-btn0" id="advanced-yes">搜 索</a>
										<a class="layui-layer-btn1" id="advanced-cancel" onclick="advanced_cancel()">取 消</a>
										<a class="layui-layer-btn2" id="advanced-clear" onclick="advanced_clear()">清空</a>
									</div>
								</div>
							</div>
							
							<div id="role-ztree-box" style="display: none;max-height: 300px;"><!--权限树-->
								<form class="layui-form" style="margin-top:24px;" onsubmit="return false">
								    <div class="layui-form-item">
								        <label class="layui-form-label">角色名称：</label>
								        <div class="layui-input-inline">
								            <input type="text" name="roleName" lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input" style="width:268px;">
								        </div>
								    </div>
								    <div class="layui-form-item is-accept">
								        <label class="layui-form-label">角色描述：</label>
								        <div class="layui-input-inline">
								            <textarea name="roleDesc" placeholder="角色描述" class="layui-textarea" style="width:268px;min-height: auto;" cols="2"></textarea>
								        </div>
								    </div>
								    <div class="layui-form-item is-accept">
								        <label class="layui-form-label">授权：</label>
								        <div class="layui-input-inline">
								            <div class="ztree" id="role-tree" name="555"></div>
								        </div>
								    </div>
								    <div class="layui-form-item" style="display:none">
										<div class="layui-input-block">
											<button class="layui-btn" lay-submit lay-filter="formRole" id="role-submit">确 定</button>
										</div>
									</div>
								</form>
							</div>
						
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="source/plugins/layui/layui.js"></script>
		<script src="source/plugins/datatables/jquery-1.12.4.js"></script>
		<script src="source/plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="source/plugins/datatables/dataTables.fixedColumns.js"></script>
		<script src="source/js/datatables-config.js"></script>
		<script src="source/plugins/ztree/js/jquery.ztree.all.min.js"></script>
		<script src="source/js/system.js"></script>
		<script src="source/js/role.js"></script>
		<script>
			$(function(){
				var employee = {
					tableId: "role-list", //table的id
					status: [ //设置哪些列不能排序和搜索
						{
							"searchable": false,
							"orderable": false,
							"targets": [0, 1, 8]
						}, //第n行不进行排序和搜索
						//					{
						//			            "visible": false,//设置哪列不显示
						//			            "targets": [-1]
						//			        }
					],
					order: [
						[3, 'asc']
					], //初始时，按列排序
					scrollX: true, //是否允许横向滚轴
					checkAllId: "checkall", //第一列checkbox的id
					sScrollXInner: '120%', //设置table的宽度
					fixedColumns: { //左右边定位
						"leftColumns": 0,
						"rightColumns": 1
					},
					url: "datas/role.json", //url链接
					filed: [ //列对应
						{
							"data": "role_name",
							"createdCell": function(nTd, sData, oData, iRow, iCol) {
								$(nTd).html(iRow + 1);
							},
							"class": "text-center",
							"width": "30px"
						},
						{
							"data": "role_name",
							"createdCell": function(nTd, sData, oData, iRow, iCol) {
								$(nTd).html('<label for="" class="checkbox">' +
									'<input type="checkbox" class="checkchild" name="' + sData + '"/>' +
									'<i class="checkbox-inner"></i>' +
									'</label>');
							},
							"class": "text-center",
							"width": "50px"
						},
						{
							"data": "role_name"
						},
						{
							"data": "role_number"
						},
						{
							"data": "role_type"
						},
						{
							"data": "role_describe"
						},
						{
							"data": "create_time"
						},
						{
							"data": "modify_time"
						},
						{
							"data": "role_name",
							"createdCell": function(nTd, sData, oData, iRow, iCol) {
								$(nTd).html('<i class="fa fa-ellipsis-h" aria-hidden="true"></i>' +
									'<dl class="layui-nav-child layui-anim layui-anim-upbit">' +
									'<dd>' +
									'<a data-href="qingdan-detail?id=' + sData + '" class="role-modify">' +
									'<i class="layui-icon">&#xe63c;</i>修改' +
									'</a>' +
									'</dd>' +
									'<dd>' +
									'<a data-id="' + sData + '" class="role-delete" class="role-delete">' +
									'<i class="layui-icon" class="submit-audit">&#xe62f;</i>删除' +
									'</a>' +
									'</dd>' +
									'</dl>');
							},
							"class": "caozuo table-right-caozuo"
						}
					]
				};
				dataTablesInit(employee); //实例化
				
	
				//高级搜索
				layui.use(['element', 'layer'], function() {
					var element = layui.element(),
						layer = layui.layer;
					$("#btn-search-advance").on('click', function() {
						show_advanced_search();
					})
	
					$("#advanced-yes").on("click", function() {
						var parent = $("#advanced-box");
						var list_number = parent.find('[name="list_number"]').val();
						var item_number = parent.find('[name="item_number"]').val();
						var subitem_number = parent.find('[name="subitem_number"]').val();
						
						$.ajax({
							url: options.url,
							data: {
								list_number: list_number,
								item_number: item_number,
								subitem_number: subitem_number
							},
							type: "post",
							dataType: "json",
							beforeSend: function() {
								advanced_cancel();
								layer.load(0);
							},
							success: function(data) {
								//处理事件
								layer.closeAll();
								$(".search-barbox").hide();//隐藏高级搜索栏
								$(".keepon-search").show();//显示继续搜索栏
							}
						});
					})
					
					$("#clear-search-btn").on('click', function(){//点击清除搜索
						$(".keepon-search").hide();//隐藏继续搜索栏
						$(".search-barbox").show();//显示高级搜索栏
						
						advanced_clear();//清空form中的值
					})
					
					$("#keep-search-btn").on('click', function(){//点击继续搜索
						show_advanced_search();
					})
	
					$(document).on('click', '.view-detail', function(e) { //点击物料详情
						e.preventDefault();
						var thisHref = $(this).data('href'); //获取详情的链接
						layer.open({
							type: 2,
							title: '物料详情',
							content: ['wuliao-detail.html'],
							scrollbar: false,
							shade: '.08',
							shadeClose: true,
							area: ['95%', '95%']
						});
					})
					
				})
			})
			
			//显示高级搜索框
			function show_advanced_search(){
				$("#advanced-box, #advanced-search-mask").css("display", "block");
			}
			//清理高级搜索的val值
			function advanced_clear() {
				$("#advanced-box").find('input[type="text"]').val("");
			}

			//关闭高级搜索
			function advanced_cancel() {
				$("#advanced-box, #advanced-search-mask").css("display", "none");
			}
			
		</script>
	</body>

</html>